<template>
  <transition name="slide">
	<div class="user-login">
        <header-common :title="title"></header-common>
        <div>
                <div class="two phone">
                    <input type="tel" placeholder="手机号" v-model="username" id="username">
                </div>
                <div class="two password">
                    <input type="password" placeholder="密码"  v-model="password" id="password">
                </div>
                <div class="error-item"  v-show="via">
                    <i class="icon-font icon-error">&#xe69a;</i>
                    <span class="err-msg" v-html="Error"></span>
                </div>
                <div class="btn" id="submit" @click='sendLogin'>登录</div>
                <!-- <input type="submit" id="submit" class="btn" value="登录"> -->
            </form>
            <div class="rf clearfix">
                <a class="left"  @click="returnSegist()">手机号快速注册</a>
                <a class="right" @click="returnRest()">忘记密码?</a>
            </div>
        </div>
        <div class="footer">
            <div class="sh">
                <div class="greyThree"><img src="./weixin.png"><div>微信</div></div>
            </div>
            <div class="sh">
                <div class="greyThree"><img src="./weibo.png"><div>微博</div></div>
            </div>
            <div class="sh">
                <div class="greyThree"><img src="./qq.png"><div>QQ</div></div>
            </div>
            <div class="or">or</div>
        </div>        
	</div>
</transition>		
</template>
<script>
import HeaderCommon from 'base/header-common/header-common'
import {sendLogin} from 'api/user-service'
import {formValidate} from 'common/js/formValidate'
import {ERR_OK} from 'api/config'
export default{
    data() {
      return {
        title:'用户登录',
        via:false,
        Error:'',
        username:'',
        password:''
      }
    },    
    computed:{
    },
    created(){
    },
    methods:{
      sendLogin() {
        var formData={
            username :this.username,
            password :this.password
        },
        validateResult = formValidate(formData)
        if(validateResult.status){
            this.via=false            
            sendLogin(this.form).then((res) => {
              if (res.code === ERR_OK) {
                console.log(res)
              }
            })            
        }else{
            this.Error=validateResult.msg
            this.via=true
        }       

      },          
      returnSegist() {
        this.$router.replace({
          path: `/user/user-regist`
        })
      },
      returnRest() {
        this.$router.push({
          path: `/user/user-rest`
        })
      }             
    },
    components: {
      HeaderCommon
    }
  }	
</script>
<style scoped lang='scss' type="text/css">
  @import "~common/scss/variable.scss";
  @import "~common/scss/mixin.scss";
.user-login{
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
}
  .slide-enter-active,.slide-leave-active{
    transition:all 0.3s;
  }
  .slide-enter{
    transform:translate3d(100%,0,0);
  } 
  .slide-leave-to{
    transform:translate3d(-100%,0,0);
  } 

.two{
    width:84%;
    height:39px;
    line-height:39px;
    border:1px solid #dcdcdc;
    border-radius:5px;
}
.phone{
    margin:36px auto 0;
}
.two>input{
    padding-left:14px;
    width:75%;
}
.password{
    margin:32px auto 0;
}
.btn{
    
    color: #fff;
    text-align: center;
    background-color: #dc3a2d;
    width: 84%;
    margin: 0 auto;
    border-radius:5px;
    height:40px;
    line-height:40px;
    letter-spacing: 2px; 
    margin-top:35px; 
}
.rf{
    width:84%;
    margin:32px auto 0;
}
.rf .right{
    font-style:normal;
    float:right;
}
.footer{
    position:fixed;
    bottom:0;
    height:125px;
    border-top:1px solid #dcdcdc;
    width:100%;
    display:flex;
    display:-webkit-flex;
    justify-content:center;
    align-items:center;
}
.sh{
    flex:1;
    text-align:center;
}
.or{
    position:absolute;
    height:20px;
    width:30px;
    text-align:center;
    background-color:$color-highlight-background;
    top:-10px;
}

/* 错误提示 */
.error-item{
    font-size: 14px;
    width: 84%;
    height: 24px;
    line-height:24px;
    margin: 16px auto 0;
    color: #ff3c3c;
}
.icon-error{
    color: #ff3c3c;
    font-size: 14px;
    font-weight: bold;
}
</style>